<!DOCTYPE html>
<!-- saved from url=(0037)http://www.hasbei.com/article/publish -->

<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">

    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>有贝口腔网-提问题</title>
    <link rel="stylesheet" th:href="@{/yb_system_css/reset.css}">
    <script type="text/javascript">
        var basePath = "/";
    </script>
    <script type="text/javascript" th:src="@{/yb_system_js/common.js}"></script>
    <script type="text/javascript" th:src="@{/yb_system_js/jquery-3.5.1.min.js}"></script>
    <script type="text/javascript" th:src="@{/yb_system_js/wangEditor.js}"></script>
    <script type="text/javascript">
        function submit(title, content) {

            if (isBlank(title)) {
                alert("请输入标题");
                return;
            }
            //如果密码不为空
            if (isBlank(content)) {
                alert("请输入内容");
                return;
            }

            var data = {};
            data["title"] = title;
            data["content"] = content;
            $.ajax({
                type: "POST",
                url: "/ask/questions?t=" + new Date().getTime(),
                data: data,
                success: function (data) {
                    if (data.code == 2000) {
                        alert("恭喜您，提交成功，待审核中");
                        layerClose(1000);//3s关闭
                    } else {
                        alert(data.msg);
                    }
                }
            });
        }

        $(function () {
            //编辑器
            var E = window.wangEditor;
            var editor = new E('#editor');

            // 自定义菜单配置
            editor.customConfig.menus = [
                'head',  // 标题
                'bold',  // 粗体
                'fontSize',  // 字号
                'fontName',  // 字体
                'italic',  // 斜体
                'underline',  // 下划线
                'strikeThrough',  // 删除线
                'foreColor',  // 文字颜色
                'backColor',  // 背景颜色
                'link',  // 插入链接
                'list',  // 列表
                'justify',  // 对齐方式
                'quote',  // 引用
                'emoticon',  // 表情
                'image',  // 插入图片
                'table',  // 表格
                'video',  // 插入视频
                'code',  // 插入代码
                'undo',  // 撤销
                'redo'  // 重复
            ];

            editor.customConfig.linkImgCheck = function (src) {
                console.log("图片："+src) // 图片的链接
                return true // 返回 true 表示校验成功
            }

            // 将图片大小限制为 3M
            editor.customConfig.uploadImgMaxSize = 1 * 1024 * 1024;
            // 限制一次最多上传 2 张图片
            editor.customConfig.uploadImgMaxLength =2;
            //开启debug模式
            editor.customConfig.debug = true;
            // 关闭粘贴内容中的样式
            editor.customConfig.pasteFilterStyle = false;
            // 忽略粘贴内容中的图片
            editor.customConfig.pasteIgnoreImg = true;

            // 使用 base64 保存图片
            //editor.customConfig.uploadImgShowBase64 = true;

            editor.customConfig.uploadFileName = "uploadFile";
            // 配置服务器端地址 upload:上传图片地址
            editor.customConfig.uploadImgServer = 'http://localhost:9998/upload';
            editor.customConfig.debug = true;
            //自定义上传图片事件

            editor.customConfig.uploadImgHooks = {
                error: function (xhr, editor) {
                    console.log("上传出错");
                },
                timeout: function (xhr, editor) {
                    console.log("上传超时");
                },
                customInsert: function (insertImg, result, editor) {
                    // 图片上传并返回结果，自定义插入图片的事件（而不是编辑器自动插入图片！！！）
                    var url = result.url;
                    //不加http显示不出（返回的数据格式必须是json字符串{url:xxx}）
                    insertImg("http://"+url)
                }
            };

            //去除复制带来的标签代码
            editor.customConfig.pasteTextHandle = function (content) {
                return delHtmlTag(content);
            }

            //获取输入的字数
            editor.customConfig.onchange = function () {
                var articallength = editor.txt.text().length;
                $(".length").text(articallength);
            }

            //去除文章提示
            editor.customConfig.onfocus = function () {
                $(".tip-text").remove();
            }

            editor.create();

            $(".sure").click(function () {
                $(".tip-text").remove();

                var title = $(".form-title").val();
                var str = editor.txt.text();

                $(".length").text(str.length);

                if (title == '' || title.length < 5) {
                    alert("请输入五个字以上的问题以?号结尾");
                    return false;
                }

                if (title.lastIndexOf("?") < 0 && title.lastIndexOf("？") < 0) {
                    alert("请输入以？号结尾");
                    return false;
                }

                //提交内容
                submit(title, editor.txt.html());
            })

            //取消
            $(".close").click(function () {
                  var index = parent.layer.getFrameIndex(window.name);
                  parent.layer.close(index);
            })
        })
    </script>
    <style>
        .form-title {
            display: inline-block;
            width: 100%;
            border: 0;
            outline: none;
            border-bottom: none;
            margin: 20px 0;
            color: #222;
            font-size: 24px;
            box-sizing: border-box;
            padding: 0 10px;
            background: #f5f5f5;
        }
        .tip-text {
            color: #999;
        }
        .editor-footer {
            display: flex;
            justify-content: space-between;
            align-items: center;
            font-size: 14px;
            position: fixed;
            bottom: 0;
            width: 100%;
            background: #fff;
            padding: 10px;
            box-sizing: border-box;
        }
        .right-btn span {
            display: inline-block;
            width: 80px;
            height: 34px;
            line-height: 34px;
            cursor: pointer;
            border-radius: 2px;
            text-align: center;
        }

        .sure {
            background: #1E9FFF;
            color: #fff;
        }

        .close {
            background: #fff;
            border: 1px solid #dedede;
            color: #333;
            margin-left: 10px;
        }
    </style>
</head>
<body >

<div th:fragment="publish">
    <input type="text" class="form-title" maxlength="100" placeholder="请输入口腔问题（5-100个汉字）">
    <div id="editor">
        <span class="tip-text">描述该口腔问题背景，如什么情况下产生这个问题！</span>
    </div>
    <div class="editor-footer">
        <div>字数 <span class="length">0</span></div>
        <div class="right-btn">
            <span class="sure">提交</span>
            <span class="close" type="">取消</span>
        </div>
    </div>
</div>

</body>
</html>